<%@page import="com.google.gdata.data.calendar.*, com.google.gdata.data.extensions.*"%>
<%@ page import="java.util.*,util.*,dal.*,model.*,bll.*,java.text.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String username = "buzzsystememail@gmail.com";//(String)session.getAttribute("username");
	String pass = "buzzsystemtest";//(String)session.getAttribute("password");
	List<CalendarEventEntry> events = CalendarUtil.retrieveAllEvents(username, pass);
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Buzz Communication</title>

<link rel='stylesheet' type='text/css' href='css/common.css' />
<link rel="stylesheet" type="text/css" href="css/buzz-design.css" />
<link rel='stylesheet' type='text/css' href='css/project-slide.css' />
<link rel="stylesheet" type="text/css" href="calendar/css/calendar.css" />
<link rel="stylesheet" type="text/css" href="css/tab.css" />
<link rel="stylesheet" href="css/hyjack.css" type="text/css" />
<link rel="stylesheet" href="css/themes/ui-lightness/jquery.ui.all.css" />
<link rel='stylesheet' type='text/css'
	href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css'
	href='fullcalendar/fullcalendar.print.css' media='print' />
<link rel="stylesheet" type="text/css" href="css/scrollbar.css" />
<link rel="stylesheet" type="text/css" href="css/splitter.css" />
<!-- 	<link rel="stylesheet" href="css/jquery-ui-1.8.14.custom.css" type="text/css" /> -->
<link rel="stylesheet" href="css/jquery-dialog.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.cleditor.css" />



<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.14.custom.min.js'></script>
<script type='text/javascript' src='js/project-slide.js'></script>
<script src="calendar/js/jMonthCalendar-1.0.1.js" type="text/javascript" /></script>
<script type='text/javascript' src='js/tab.js'></script>
<script type="text/javascript" src='js/jquery.splitter.js'></script>
<script type='text/javascript' src='js/common.js'></script>
<script type='text/javascript' src='js/email.js'></script>
<script type='text/javascript' src='js/chatting.js'></script>
<script language="javascript" type="text/javascript"
	src="js/jquery.hyjack.js"></script>
<script language="javascript" type="text/javascript"
	src="js/jquery.hyjack.select.js"></script>

<script type="text/javascript" src="js/jquery.cleditor.min.js"></script>
<script type="text/javascript" src="js/jquery.cleditor.table.min.js"></script>
<script type="text/javascript" src="js/jquery.cleditor.xhtml.min.js"></script>

<script src="js/jquery.tinyscrollbar.js" type="text/javascript"></script>
<script type='text/javascript' src='fullcalendar/fullcalendar.js'></script>

<script type='text/javascript'>
	
	
	var userName = "";
	var calendar = null;
	$(document).ready(function() {
		
		//get current usser account
		userName = '<%=(session.getAttribute("username") != null ? session.getAttribute("username") : "")%>';

		////////////////////////////////////////////////////////////////////////////
		//Full calendar
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		calendar = $('#full_calendar').fullCalendar({
			header : {
				left : 'prev,next today',
				center : 'title',
				right : 'month,agendaWeek,agendaDay'
			},
			contentHeight : 514,
			aspectRatio : 1.45,
			selectable : true,
			selectHelper : true,
			select : function(start, end, allDay) {
				var date = $.fullCalendar.parseDate(start);
				//alert (date);
				// 			var title = prompt('Event Title:');
				// 			if (title) {
				// 				calendar.fullCalendar('renderEvent',
				// 					{
				// 						title: title,
				// 						start: start,
				// 						end: end,
				// 						allDay: allDay
				// 					},
				// 					true // make the event "stick"
				// 				);
				// 			}
				// 			calendar.fullCalendar('unselect');

			},
			editable : true,
			events : 
				[ 
					<%for (int i = 0; i < events.size(); i++) {
						CalendarEventEntry evt = events.get(i);
						String strStartDate = evt.getTimes().get(0).getStartTime().toString();
						String strEndDate = evt.getTimes().get(0).getEndTime().toString();
						System.out.println(strStartDate + "|" + strEndDate);
						String strTitle = "\"" + evt.getTitle().getPlainText() + "\"";
					%>  
						<%
							if (i != 0)
							{
						%>
							,
						<%
							}
						%>
					    {
							title : <%=strTitle%>,
							allDay: false,
							start : $.fullCalendar.parseISO8601("<%=strStartDate%>"),
							end : $.fullCalendar.parseISO8601("<%=strEndDate%>"),
						}
						
					<%}%> 
				]
		});

	});
</script>
</head>
<body>


			<div id="divCalendarMaximizedContentPanel"
				class="divCalendarMaximize">
				<div>
					<table class="tblOperations">
						<thead>
							<td class="tblOperations header">Calendar</td>
							<td class="tblOperations maximize"><a
								class="ui-state-title-bar ui-corner-all" href="#"
								onclick='' title='restore'>
									<span class="ui-icon ui-icon-minimize"></span> </a></td>
						</thead>
					</table>
				</div>
				<table class="tblMaximizedCalendarBody">
					<tr>
						<td class="tblMaximizedCalendarBody tdMiniCalendar"
							style='width: 17%;'>
							<div id="divCalendarMaximizedPanel"
								style="width: 220px; margin-top: -1px; margin-right: -1px;">
								<!-- This is a reserved place used for Calendar -->
								
							</div></td>
						<td class="tdFullCalendar">
							<div id='full_calendar'
								style="text-align: center; margin-right: 8px; margin-bottom: 8px;">
							</div></td>
					</tr>
				</table>
			</div>


</body>
</html>